前端架构涉及到哪些范围？

总体指导思想是前后端分离，后端同事提供线上API数据查询接口或websocket接口，前端同事负责处理获取到的数据、编写展示的页面、实现用户交互；前后端都要考虑web开发的安全性问题，表单提交到数据库前对用户的输入进行转义、登录避免明文传输密码等。前后端都要关注SQL注入攻击、跨站脚本攻击、跨站请求伪造、开放重定向这些安全性问题。

最近在看《大型JavaScript应用最佳指南》，作者讲到，大型web应用实际相当于一系列组件之间的互相通信，包括组件之间的组合和通信。在设计组件的时候不仅要从架构可扩展性的角度考虑，还要从功能完备性的角度考虑。有两种构建组件的方法。其一，可以扩展已有的库和框架，通过不断扩展逐渐实现特定功能，其二，通过给组件传入配置参数，告诉组件如何工作。我们要设计灵活的组件，就要把业务行为传入组件，而不是在组件中直接编写，这样不同的组件就可以利用相同的无状态业务逻辑函数。

开发的技术框架，如 vuejs, reactjs, angularjs; 还有一些脚手架，如 vue-cli; 还有一些全家桶，如vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)。

静态资源的管理工具，包括对css/js/pictures等文件进行合并、压缩、优化，以及自动替换。grunt/gulp 是任务管理器，引入 watch 模块可以实现页面的热更新；webpack通过loaders来处理静态文件。webpack-dev-server 可以实现热更新。

API数据管理，后端提供完整的API文档和使用postman提供测试数据接口，最关键的是确定成功或失败时分别返回的数据结构。后端还没开发好或者没有测试数据时，前端可以模拟API，推荐一个工具：mockjax；一些全家桶也有配备这类工具。

前端要构造相应的通知系统，如服务器出错、连接超时、参数无效、被退出等，前端要能优雅地报错，并且尽量减少单点错误对整个系统的影响，引导用户尝试恢复正常，如刷新，重新登录等，前端也需要记录日志，这样工程师可以快速debug。

关于跨域问题，这个暂时todo，等我有足够多的实践经验再来补充，目前是使用chrome的CORS插件，因为上线后就不存在跨域的问题；如果前端需要调用第三方接口存在跨域问题，我目前的做法是找后台调用我要的第三方接口，然后后台再提供一个新的接口给我，这样就不存在跨域问题，但是前后端分离的话，调用第三方接口出现跨域问题不是也应该由前端来解决吗？前后端分离的话自己可以起一个node中间层服务器，然后本地server就可以支持代理其他域下的api的功能，即proxy，在ajax请求时突破前端同源策略的限制。

前端团队中有多个人同时写代码，所有文档规范是必须的，不然可能容易存在命名冲突，css样式覆盖，函数重写，z-index互相攀比的问题。在js方面，要推荐按闭包的方式来写，或者根据技术选型按组件模式来开发；因为我们项目中有打包工具，所以开发人员可以用ES5也可以用ES6，ES6更像是一门编程语言，适合我们养成面向对象编程的习惯。css方面，同样因为我们项目中有打包工具，所以用纯CSS/LESS/SASS写都可以接受，看开发者决定，还要进行css代码库管理，css样式命名管理，防止无意义的命名，这个建议读一下bootstrap.css。

前端也需要构建自动化测试，包括独立单元测试和端到端(E2E)测试自动化，当然还有人工测试。使用的工具有Jasmine和Selemium。追求开发完成后测试发现 0 个bug是我们一直追求的目标，毕竟谁也不希望每天被测试的邮件轰炸，特别是对于我这种不喜欢跟测试讲话的人，整个测试过程完成到上线都没有测试找过我，系统也没有提示说我有bug，这是最爽的一件事。